<template>
  <x-main>
    <x-table ref="table" :isPage="false" @search="onSearch" @modify="onModify" @remove="onRemove">
      <template v-slot:btn-tool>
        <el-button type="primary" @click="onAdd">新增</el-button>
      </template>
      <template #status="scope">
        <el-tag :type="scope.data.status == 1 ? '' : 'info'">{{ scope.data.status == 1 ? "正常" : "停用" }}</el-tag>
      </template>
      <template #visible="scope">
        <el-tag :type="!scope.data.meta.isHide ? '' : 'info'">{{ !scope.data.meta.isHide ? "显示" : "隐藏" }}</el-tag>
      </template>
      <template #icon="scope">
        <component v-if="scope.data.meta.icon" :is="scope.data.meta.icon" style="width: 25px; height: 25px"></component>
      </template>
    </x-table>
  </x-main>
</template>

<script setup name="sys-menu-index">
import useStore from '@/stores/modules/sys/menu';
const sysMenu = useStore();

import XForm from "./Form.vue"

import {onMounted, ref} from "vue";

onMounted(() => {
  sysMenu.init(table)
  sysMenu.getList(1, 10);
})

let table = ref();

/**
 * 搜索
 * @param condition
 */
const onSearch = (condition) => {
  sysMenu.getList(condition);
}

/**
 * 新增
 * @returns {Promise<void>}
 */
const onAdd = async () => {
  open(XForm, "添加菜单", {}, 700)
}

/**
 * 修改
 * @param row
 * @returns {Promise<void>}
 */
const onModify = async (row) => {
  let info = await sysMenu.getInfo(row.id);
  if (! info) {
    return
  }

  open(XForm, "修改菜单", info, 700)
}

/**
 * 删除
 * @param row
 */
const onRemove = (row) => {
  Msg.confirm("确认删除该数据？").then(_ => {
    sysMenu.remove(row.id)
  })
}

const open = (component, title, data, width) => {
  const op = Dialog.open(component, title)
  op.setWidth(width)

  op.mounted(c => {
    c.render(data)
  })

  op.confirm(c => {
    c.submit()
  })
}
</script>
